<template>
  <div class="goods-selling">
    <div class="goods-selling-item">
      <el-card class="box-card">
        <div class="goods-selling-item-con clearfix">
          <img src="@/assets/images/dish.jpeg" alt="">
          <el-button @click="undercarriageGoods" size="small" type="danger" plain>下架该商品</el-button>
          <router-link to="/index/alterGoods">
            <el-button class="alter-btn" size="small" type="info" plain>修改商品信息</el-button>
          </router-link>
          <div class="goods-selling-item-top">
            <p>鸡蛋炒河粉</p>
            <p>单价: ¥6.00</p>
            <p>月销量: 56份</p>
            <p>库存: 13份</p>
          </div>
          <br>
          <div class="goods-selling-item-buttom">
            <p>普通的鸡蛋炒河粉</p>
            <p>类型: 小吃</p>
          </div>
        </div>
      </el-card>
    </div>
    <div class="goods-selling-item">
      <el-card class="box-card">
        <div class="goods-selling-item-con clearfix">
          <img src="@/assets/images/dish.jpeg" alt="">
          <el-button @click="undercarriageGoods" size="small" type="danger" plain>下架该商品</el-button>
          <router-link to="/index/alterGoods">
            <el-button class="alter-btn" size="small" type="info" plain>修改商品信息</el-button>
          </router-link>
          <div class="goods-selling-item-top">
            <p>鸡蛋炒河粉</p>
            <p>单价: ¥6.00</p>
            <p>月销量: 56份</p>
            <p>库存: 13份</p>
          </div>
          <br>
          <div class="goods-selling-item-buttom">
            <p>普通的鸡蛋炒河粉</p>
            <p>类型: 小吃</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsSelling',
  methods: {
    undercarriageGoods () {
      this.$confirm('确定要下架该商品吗?', '商品操作提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已成功下架!'
        })
      })
    }
  }
}
</script>

<style lang="stylus">
  .goods-selling
    .el-card__body
      padding 10px 15px
</style>

<style lang="stylus" scoped>
  @import "../../assets/css/base.styl"
  .goods-selling
    width: $width
    margin: 0 auto
    padding-left 170px
    box-sizing: border-box
    .goods-selling-item
      margin-bottom 8px
      img
        float: left
        width: 80px
        height: 80px
      .goods-selling-item-con
        position: relative
        .el-button
          position: absolute
          right: 0
          top: 6px
        .alter-btn
          top: 44px
        >div
          float: left
          margin-left 15px
          font-size 14px
        p
          display inline-block
          margin-top 14px
          margin-right: 70px
      .goods-selling-item-buttom
        p
          color: #999
</style>
